<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>角色管理</title>
    <jsp:include page="/assets/common-css.jsp"/>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/assets/vendors/custom/jstree-plugin/jstree-plugin.css" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/assets/vendors/custom/mulitselect/css/multi-select.css" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/assets/vendors/custom/swiper/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/role/css/role-listPage.css" />
    <script>
        var DatapermiTypes = ${DatapermiTypes};
        var Datapermis = ${Datapermis};
    </script>
</head>
<body>
<div class="m-portlet">
    <div class="m-portlet__body">
        <div class="row">
            <div class="col-lg-4 m-border-right">
                <div class="m-input-icon m-input-icon--left m--margin-bottom-10">
                    <input id="search" type="text" class="form-control m-input" placeholder="输入名称">
                    <span class="m-input-icon__icon m-input-icon__icon--left">
                            <span>
                                <i class="fa fa-search"></i>
                            </span>
                        </span>
                </div>
                <div>
                    <button onclick="addRole();" type="button" class="btn btn-info m-btn m-btn--custom btn-sm" style="width: 100%;">
                        新增角色
                    </button>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active show tabContent0">
                        <div id="role-tree" class=""></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 m-border-left">
                <div class="m-portlet__body user-div">
                    <div class="m-portlet__head user-header">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    <span id="roleName"></span>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 role-select">
                        <ul class="nav nav-tabs nav-fill" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#m_tabs_2_1">
                                    菜单
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#m_tabs_2_2">
                                    用户
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="m_tabs_2_1" role="tabpanel">
                                <div class="row">
                                    <div class="col-lg-6 m-border-right">
                                        <div class="tab-content" id="menutree-div">
                                        </div>
                                    </div>
                                    <div class="col-lg-6 m-border-left">
                                        <button type="button" class="btn btn-info m-btn m-btn--custom btn-sm" style="width: 100%;">
                                            已选菜单
                                        </button>
                                        <ul class="list-group select-group">
                                        </ul>
                                        <div class="pull-right save_menu_btn">
                                            <button onclick="saveRoleMenu();" type="button" class="btn btn-info m-btn m-btn--custom btn-sm" >
                                                保存
                                            </button>
                                            <button onclick="deleteRoleMenuAll();" type="button" class="btn btn-info m-btn m-btn--custom btn-sm" >
                                                解除全部绑定
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="m_tabs_2_2" role="tabpanel">
                                <div class="col-sm-12 role-select">
                                    <select id='user-selected-option' multiple='multiple'>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="/assets/common-js.jsp" />
    <script src="<%=request.getContextPath()%>/assets/vendors/custom/swiper/swiper.min.js"></script>
    <script src="<%=request.getContextPath()%>/assets/vendors/custom/jstree-plugin/jstree-plugin.js"></script>
    <script src="<%=request.getContextPath()%>/assets/vendors/custom/mulitselect/js/jquery.multi-select.js"></script>
    <script src="<%=request.getContextPath()%>/assets/vendors/custom/quicksearch/js/jquery.quicksearch.js"></script>
    <script src="<%=request.getContextPath()%>/role/js/role-menu.js"></script>
    <script src="<%=request.getContextPath()%>/role/js/role-user.js"></script>
    <script src="<%=request.getContextPath()%>/role/js/role-datapermi.js"></script>
    <script src="<%=request.getContextPath()%>/role/js/role-listPage.js"></script>
</body>
<script id="editRoleTemplate" type="text/html">
    <div class="m-form m-form--fit m-form--label-align-right layer-div layui-form">
        <div class="m-portlet__body">
            <input type="hidden" id="edit_role_id">
            <input type="hidden" id="edit_role_isPublic" value="0">
            <div class="form-group m-form__group row" id="dept_id_div">
                <label class="col-lg-3 col-form-label">
                    角色名称 <font color="red">*</font>
                </label>
                <div class="col-lg-8">
                    <input type="text" required lay-verify="required" class="form-control"
                           id="edit_role_name" placeholder="请输入角色名称" lay-verType="tips">
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-lg-3 col-form-label">
                    角色Code <font color="red">*</font>
                </label>
                <div class="col-lg-8">
                    <input type="text" required lay-verify="required" class="form-control"
                           id="edit_role_code"  placeholder="请输入角色code" lay-verType="tips">
                </div>
            </div>
            <div class="form-group m-form__group row">
                <label class="col-lg-3 col-form-label">
                    描述信息
                </label>
                <div class="col-lg-8">
                    <textarea id="edit_role_description" class="form-control" rows="3" cols="3"></textarea>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">
                <div class="row">
                    <div class="col-lg-12 ml-lg-auto">
                        <button class="btn btn-secondary m--pull-right edit_cancle">
                            取消
                        </button>
                        <button id="edit_role_yes" lay-submit lay-filter="save_role" class="btn btn-brand m--pull-right yes-btn">
                            确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tree-template">
    <div id="tree" class="tree"></div>
</script>
<script type="text/html" id="datapermi-select-template">
    {{#  layui.each(d.list, function(index, item){ }}
    <div class="form-group m-form__group row col-lg-12 align-items-center">
        <label class="col-form-label col-lg-3 col-sm-12">
            {{item.name}}
        </label>
        <div class="m-input-icon col-lg-9 col-sm-12">
            <select multiple="multiple" class="form-control m-selet2" data-typeid="{{item.id}}" id="{{item.code}}-select">
            </select>
        </div>
    </div>
    {{#  }); }}
</script>
<script id="select-li" type="text/html">
    <li class="list-group-item select-{{d.id}}">
        <span class="label label-default label-pill pull-right delete-btn" data-type="{{d.type}}" data-id="{{d.id}}">x</span>
        <i class="la la-align-left m--font-brand"></i> {{d.title}}
    </li>
</script>
<script id="data-select-li" type="text/html">
    <li class="list-group-item select-{{d.id}}">
        <i class="la la-align-left m--font-brand"></i> {{d.title}}
    </li>
</script>
<script id="userSelectOption" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
    <option value='{{item.CODE}}' {{item.SELECTED}}>{{item.NAME}}({{item.CODE}})</option>
    {{#  }); }}
</script>
<script id="datapermiOption" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
    {{# if(item.selected != undefined){ }}
    <option value='{{item.id}}' selected="{{item.selected}}">{{item.name}} / {{item.code}}</option>
    {{# } else { }}
    <option value='{{item.id}}'>{{item.name}} / {{item.code}}</option>
    {{# } }}
    {{#  }); }}
</script>
</html>